import styled from 'styled-components';

export const OuterWrapper = styled.div`
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  padding: 10px;
  background-color: orange;
`;

// 1.子元素可以单独抽到一个样式组件
// 2.可以接受外部传入的props
// 3.可以通过attrs给标签模板字符串中提供属性（实现props默认值）
// 4.从一个单独的文件引入
export const InnerWrapper = styled.div.attrs((props) => ({
    bg: props.bg ?? 'blue'
}))`
  padding: 20px;
  background-color: ${({bg}) => bg};
  box-sizing: border-box;
  font-size: ${props => props.theme.defaultFontSize};

  > span {
    &:hover {
      color: #fff;
    }
  }
`

export const Button = styled.button`
  border: 1px solid #999;
  outline: none;
`

export const PrimaryButton = styled(Button)`
  background-color: aqua;
  color: #fff;
  border-radius: 20%;
`